<template>
    <div class="head-info">
        <h2 :class="{over:over}">{{name}}</h2>
        <p class="info">{{info}}</p>
    </div>
</template>

<script>
export default {
    props: ["info","name","over"],
    data() {
        return {
           
        }
    },
    created() {
    
    }
}
</script>

<style lang="less" scoped>
.head-info {
    background-color: #fff;
    padding: 50px 35px 15px;
    position: relative;
    // margin-bottom: 16px;
    // &::after {
    //     content: '';
    //     width: 100%;
    //     height: 16px;
    //     background-color: #f5f5f5;
    //     position: absolute;
    //     left: 0;
    //     bottom: -16px;
    // }
    // &.fixed {
    //     width: 100%;
    //     position: fixed;
    //     top: 90px;
    // }
    h2 {
        font-size: 36px;
        color: #6c52fb;
        padding-left: 50px;
        background: url('../assets/imgs/app/head_info_icon.png') no-repeat left 10px;
        background-size: 38px 30px;
        &.over {
            width: 85%;
        }
    }
    .info {
        padding-left: 50px;
        font-size: 28px;
        color: #777;
        margin-top: 20px;
    }
}
</style>

